import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'

export default class App extends Component {
  state = {
    list: JSON.parse(localStorage.getItem('todos')) || [],
  }

  componentDidMount() {
    this.updateId = PubSub.subscribe('update', (topic, id) => {
      const newList = this.state.list.map((item) => {
        if (item.id === id) item.isDone = !item.isDone
        return item
      })

      this.setState({
        list: newList,
      })
    })
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.updateId)
  }
  // 定义一个函数,为了接收Header组件中传过来的任务名,并添加任务
  getTodoName = (todoName) => {
    // 根据任务名,创建任务对象
    const obj = {
      id: Date.now(),
      todoName,
      isDone: false,
    }
    // 一般不要直接修改数据本身,应该根据原来的数据,创建一份新的数据,然后修改新的数据.利用新的数据赋值
    const newList = [...this.state.list]
    newList.push(obj)
    this.setState({
      list: newList,
    })
  }

  // 定义函数,接收item传递过来的id,对数据进行删除
  getTodoIdDelete = (id) => {
    // this.state.list.filter((item) => {
    //   return item.id !== id
    // })
    const newList = this.state.list.filter((item) => item.id !== id)
    this.setState({
      list: newList,
    })
  }

  // 定义函数,实现全选的功能
  allCheckHandle = () => {
    // 如果所有的数据当前是都选中的,就应该变成都不选中
    // 如果数据中有一个没选中,所有数据就应该都选中
    const isAll = this.state.list.every((item) => item.isDone)
    const newList = this.state.list.map((item) => {
      item.isDone = !isAll
      return item
    })
    this.setState({
      list: newList,
    })
  }

  //定义函数,删除所有完成项
  clearDoneHandle = () => {
    const newList = this.state.list.filter((item) => !item.isDone)
    this.setState({
      list: newList,
    })
  }

  // 定义函数,用来修改某个任务的任务名
  updateTodoName = (id, todoName) => {
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        item.todoName = todoName
        item.isDone = false
      }
      return item
    })
    this.setState({
      list: newList,
    })
  }
  render() {
    const { list } = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          {/* 将函数传递给Header,为了获取Header中的任务名 */}
          <Header getTodoName={this.getTodoName}></Header>
          {list.length ? (
            <div>
              <List
                list={list}
                getTodoIdDelete={this.getTodoIdDelete}
                updateTodoName={this.updateTodoName}
              ></List>
              <Footer
                list={list}
                allCheckHandle={this.allCheckHandle}
                clearDoneHandle={this.clearDoneHandle}
              ></Footer>
            </div>
          ) : (
            <h1>暂无数据</h1>
          )}
        </div>
      </div>
    )
  }

  componentDidUpdate() {
    const { list } = this.state
    // 直接在render中存储数据,存到localStorage
    localStorage.setItem('todos', JSON.stringify(list))
  }
}
